<style lang="scss" scoped>
    .container{
        position: relative;
        .info{
            width:160px;
            height: 105px;
            font-size: 12px;
            padding: 10px;
            box-sizing: border-box;
            position:absolute;
        }
        .added{
            cursor: pointer;
            margin: 80px auto 0;
            text-align: center;
            display: flex;
            justify-content: space-around;
            .item{
                width:100%;
                position: relative;
                &::after{
                    content: "";
                    height: 100%;
                    background:  #DEDEE0;
                    width:1px;
                    position:absolute;
                    right: 0;
                    top: 0;
                }
                &:last-child::after{
                    content: none;
                }
            }
        }
        

    }
.join{
    font-family: PingFangSC-Thin;
    width:100%;
    height: 300px;
    text-align: center;
    background: var(--blue);
    h3{
        display: block;
        color: #fff;
        font-weight: lighter;
        padding: 80px 0 30px;
        font-size: 42px;
    }
}


</style>
<template>
    <div>
        <div class="container">
            <div class="info" v-for="(v,i) in added" :key="i"   v-show="hover==i" :style="{background: 'url(./alert.png)',left:hover*145+'px'}">{{v.info}}</div>
            <div class="added">
                <div class="item" v-for="(v,i) in added" :key="i" @mouseover="hover=i">
                    <img :src="   hover>-1&&i==hover? require(`@/assets/box6_added${i+1}_hover.svg`):require(`@/assets/box6_added${i+1}.svg` )" >
                    <h5>{{v.name}}</h5>
                </div>
            </div>
        </div>
        <div class="join">
            <h3>派智知产管家为您提供全面的专利解决方案</h3>
            <button type="button" @click="jmp" class="btn diy_btn">立即体验</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            hover:-1,
            added:[
                {
                    name:'专利挖掘',
                    info:'帮助客户从技术中挖掘出专利，从而更贴切用户的需求'
                },
                {
                    name:'一键递交',
                    info:'使用合法的资质递交至国知局，确保专利授权合法，免除琐碎手续'
                },
                {
                    name:'加快审查',
                    info:'发明、实用新型、外观设计专利申请向国家知识产权局请求加快审查'
                },
                {
                    name:'费减代办',
                    info:'帮助客户办理费用减缓，降低客户申请费用负担'
                },
                {
                    name:'加强保护',
                    info:'扩展实施方式、增加保护客体、或技术方案上位等方式，提高专利保护力度'
                },
                {
                    name:'担保赔付',
                    info:'担保申请如被驳回，退还全部代理费'
                },
                {
                    name:'加急撰稿',
                    info:'减少专利稿件撰写周期，快人一步抢占专利先机'
                },
                {
                    name:'代理人等级',
                    info:'根据需求选择合适的代理人等级，为专利的质量保驾护航'
                }

            ]
        }
    },
    methods:{
        jmp(){
            this.TJ_event('下方-立即体验')
            if(localStorage.getItem('client_id')){
                self.location=this.cms
            }else{
                this.$router.push('login')
            }
        }
    }
}
</script>